<template>
  <view class="container">
    <nut-button type="primary" @click="handleClick('text', state.msg2, true)" style="width: 100%">点我</nut-button>

    <div>
      <nut-cell title="请选择城市" :desc="popupDesc" @click="show = true"></nut-cell>
    </div>
    <nut-popup position="bottom" v-model:visible="show">
      <nut-picker
        v-model="popupValue"
        :columns="columns"
        title="请选择城市"
        @confirm="popupConfirm"
        @cancel="show=false"
      >
      </nut-picker>
    </nut-popup>
    <nut-tabs v-model="state.tab1value">
      <nut-tab-pane title="Tab 1">
        Tab 1
      </nut-tab-pane>
      <nut-tab-pane title="Tab 2">
        Tab 2
      </nut-tab-pane>
      <nut-tab-pane title="Tab 3">
        Tab 3
      </nut-tab-pane>
    </nut-tabs>
    <nut-toast :msg="state.msg2" v-model:visible="state.showToast" :type="state.type" :cover="state.cover"/>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'

const state = reactive({
  msg: '欢迎使用 NutUI4.0 开发小程序',
  msg2: '你成功了～',
  type: 'text',
  show: false,
  cover: false,
  tab1value: '0',
  options1: [
    { text: '全部商品', value: 0 },
    { text: '新款商品', value: 1 },
    { text: '活动商品', value: 2 }
  ],
  options2: [
    { text: '默认排序', value: 'a' },
    { text: '好评排序', value: 'b' },
    { text: '销量排序', value: 'c' },
  ],
  value1: 0,
  value2: 'a'
});

const handleClick = (type, msg, cover = false) => {
  state.show = true;
  state.msg2 = msg;
  state.type = type;
  state.cover = cover;
  state.showToast = true
};

const visible = ref(false);

const show = ref(false)

const popupDesc = ref()
const popupValue = ref();
const columns = ref([
  { text: '南京市', value: 'NanJing' },
  { text: '无锡市', value: 'WuXi' },
  { text: '海北藏族自治区', value: 'ZangZu' },
  { text: '北京市', value: 'BeiJing' },
  { text: '连云港市', value: 'LianYunGang' },
  { text: '浙江市', value: 'ZheJiang' },
  { text: '江苏市', value: 'JiangSu' }
]);

const popupConfirm = ({ selectedValue, selectedOptions }) => {
  popupDesc.value = selectedOptions.map((val) => val.text).join(',')
  show.value = false
}
</script>

<style lang="scss">
.container {
  padding: 12px;
  display: flex;
  flex-direction: column;
}
</style>
